<script setup>
import { reactive,ref } from 'vue'
import { ElMessage } from "element-plus";
import useUserInfoStore from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();
//...userInfoStore.info : (展开操作符)用于可迭代对象(如数组、对象)解包成单独元素
const userInfo = ref({ ...userInfoStore.info })


//定义数据模型
const updatePasswordDate = ref({
    old_pwd: '',
    new_pwd: '',
    re_pwd: ''
})

//校验密码的函数,rule : 表示规则 | value : 表示值 | callback ：表示回调函数
const checkRePassword = (rule, value, callback) => {
    if(value == ''){
        callback(new Error('请再次确认密码'))
    }else if(value != registerDate.value.password){
        callback(new Error('请确报两次输入的密码一致'))
    }else{
        callback();
    }
}

//定义表单校验规则
const rules =  {
    // username:[
    //     //required:true ：必须传 ,message:'请输入用户名' :提示信息 ,trigger:blur ：离焦的时候校验
    //     {required:true,message:'请输入用户名',trigger:blur},
    //     //min:5 :最小5字符 ,最大16字符
    //     {min:5,max:16,message:'长度为5~16位非空字符',trigger:blur}
    // ],
    password:[
        //required:true ：必须传 ,message:'请输入用户名' :提示信息 ,trigger:blur ：离焦的时候校验
        {required:true,message:'请输入密码',trigger:blur},
        //min:5 :最小5字符 ,最大16字符
        {min:5,max:16,message:'长度为5~16位非空字符',trigger:blur}
    ],
    rePassword:[
        //自定义校验密码规则
        {validator:checkRePassword,trigger:blur}
    ]
}

//修改密码，异步请求
import {userUpdatePasswordService} from '@/api/user.js'
import router from '@/router';
const updatePassword = async() => {
    //调用函数
    const result = await userUpdatePasswordService(updatePasswordDate.value);
    console.log(updatePasswordDate.value);
    ElMessage.success(result.message?result.message:'修改成功')

    //修改密码成功跳转到登入，重新登入
    router.push('/login')

}


</script>


<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>修改密码</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form ref="form" size="large" autocomplete="off" :model="updatePasswordDate" :rules="rules">
                    <el-form-item >
                        <el-input :prefix-icon="Lock" type="password" placeholder="请输入原密码"
                            v-model="updatePasswordDate.old_pwd"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"
                            v-model="updatePasswordDate.new_pwd"></el-input>
                    </el-form-item>
                    <el-form-item prop="rePassword">
                        <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"
                            v-model="updatePasswordDate.re_pwd"></el-input>
                    </el-form-item>
                    <!-- 修改按钮 -->
                    <el-form-item>
                        <el-button class="button" type="primary" auto-insert-space @click="updatePassword">
                            确定
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>